<template>
  <div class="shop-container">
    <ul class="shop-list">
      <li class="shop-list-item">
        <img src="../images/prodouct.jpg" alt />
        <h4>[Apple] iPhone XS (A2099) 64GB 深空灰色 移动联通4G手机</h4>
        <div class="item-info">
          <span class="info-price">￥26.9</span>
          <span class="info-sales">已售878985</span>
          <span class="info-user">
            <img src="../images/user1.jpg" alt />
            <img src="../images/user2.jpg" alt />
          </span>
          <span class="info-buy">
            <button>去拼单 ></button>
          </span>
        </div>
      </li>
      <li class="shop-list-item">
        <img src="../images/prodouct.jpg" alt />
        <h4>[Apple] iPhone XS (A2099) 64GB 深空灰色 移动联通4G手机</h4>
        <div class="item-info">
          <span class="info-price">￥26.9</span>
          <span class="info-sales">已售878985</span>
          <span class="info-user">
            <img src="../images/user1.jpg" alt />
            <img src="../images/user2.jpg" alt />
          </span>
          <span class="info-buy">
            <button>去拼单 ></button>
          </span>
        </div>
      </li>
      <li class="shop-list-item">
        <img src="../images/prodouct.jpg" alt />
        <h4>[Apple] iPhone XS (A2099) 64GB 深空灰色 移动联通4G手机</h4>
        <div class="item-info">
          <span class="info-price">￥26.9</span>
          <span class="info-sales">已售878985</span>
          <span class="info-user">
            <img src="../images/user1.jpg" alt />
            <img src="../images/user2.jpg" alt />
          </span>
          <span class="info-buy">
            <button>去拼单 ></button>
          </span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>
<style lang='scss' scoped>
.shop-container {
  width: 90%;
  margin: auto;
  overflow: auto;
}
.shop-list-item {
  /* display: flex;
  flex-direction: column;
  flex-flow: wrap;
  border: 1px red solid;
  width: 100%; */
  > img {
    width: 100%;
    height: 250px;
  }
  h4 {
    color: #666;
  }
  .item-info {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .info-price {
      flex: 1;
      color: orangered;
      font-size: 18px;
    }
    .info-sales {
      flex: 3;
      font-size: 10px;
      color:darkgray;
      margin-left: 2px;
    }
    .info-user {
      flex: 2;
      img {
        width: 25px;
        border-radius: 50%;
      }
      img:nth-child(2) {
        margin-left: -12px;
      }
    }
    .info-buy {
      flex: 2;

      button {
        border: none;
        color: white;
        background-color: orangered;
        border-radius: 5px;
        padding: 5px;
      }
    }
  }
}
</style>